<template>
    <div class="info">
        <p><slot></slot></p>
        <img src="/img/common/tishi.png" alt="" title="提示信息">
    </div>

</template>

<script>
export default {
    name: "PromptInformation"
}
</script>

<style scoped>
.info{
    position: fixed;
    top: 17%;
    left: 50%;
    transform: translate(-50%);
    width: 21vw;
    min-height: 40px;
    min-width: 100px;
    background: rgba(79, 80, 82, 0.6);
    padding: 3px 10px;
    display: flex ;
    justify-content: space-between;
    align-items: center;
    font-size: 1vw;
    color: #f1f5f4;
    border-radius: 0.4vw;
    animation: move 1s ease 0s 1 forwards,disappear 1s  ease-in-out 3s 1 forwards ;
    z-index: 999999;
}
.info p::before{
    display: inline-block;
    content: "提示：";
    padding: 0 4px;
    color: #ee4f4f;

}
 @keyframes move {
     0%{
         top: 17%;
         opacity: 0;
     }
     100%{
         top:20%;
         opacity: 1;
     }
 }
@keyframes disappear {
    0%{
        top: 20%;
        opacity: 1;
    }
    100%{
        top:17%;
        opacity: 0;
    }
}
@media (min-width: 0) and (max-width: 800px) {
    .info{
        min-width: 350px;
        min-font-size: 15px;
        word-break: break-all;
    }

    .info p::before {
        min-font-size: 15px;
        font-size: 14px;
    }
    img{
        width: 25px;
    }
}
</style>